<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>主页</title>
    <link rel="stylesheet" type="text/css" href="css/common.css" th:href="@{/arc/css/common.css?v=3.6.0}"/>
</head>
<style type="text/css">
    .content {
        width: 98%;
        height: 28rem;
        border: 1px solid rgb(21, 136, 194);
        margin: 1rem auto;
        border-radius: 0.4rem;
    }

    .divSearch {
        margin: 1rem 0;
    }

    .divSearch * {
        vertical-align: middle;
    }

    .dsCont {
        font-style: inherit;
        color: white;
        font-size: 2rem;
        text-shadow: 2px 2px 2px #4b69ad;
    }

    span.dsCont {
        margin-left: 4rem;
        letter-spacing: 0.3rem;
    }

    .divSearch input[type="text"] {
        outline: none;
        border: 3px solid rgb(21, 136, 194);
        background: none;
        color: white;
        width: 18rem;
        height: 1.8rem;
        border-radius: 3px;
        margin-left: 6rem;
        box-sizing: border-box;
    }

    .divSearch input[type="button"] {
        cursor: pointer;
        font-weight: bold;
        width: 4rem;
        height: 1.8rem;
        border: 3px solid rgb(21, 136, 194);
        background: rgb(45, 249, 255);
        position: relative;
        left: -2px;
    }

    .divContent ul {
        display: flex;
    }

    .divContent li {
        display: inline-block;
        width: 12.5%;
        text-align: center;
        line-height: 2rem;
        /*white-space: nowrap;*/
    }

    .ulTitle {
        color: rgb(83, 200, 217);
        background: rgb(14, 22, 50);
    }

    .ulContent {
        color: white;
    }

    .ulContent span {
        display: inline-block;
        width: 3rem;
        height: 1.3rem;
        line-height: 1.3rem;
        border-radius: 0.2rem;
    }

    .divContentUl {
        max-height: 21rem;
        overflow: auto;
    }

    .myHref {
        text-decoration: none;
        color: white;
    }
</style>
<body>
<header>
    <h1>西城区建设项目一览表</h1>
    <h2>A LIST OF CONSTRUCTION PROJECTS IN XICHENG DISTRICT</h2>
</header>
<div class="content">
    <div class="divSearch">
        <span class="dsCont">项目总数：</span>
        <i class="dsCont" id="projectCount">0</i>
        <input type="text" id="projectName"/><input type="button" id="btnSearch" value="搜索"/>
    </div>
    <div class="divContent">
        <!-- 标题 -->
        <ul class="ulTitle">
            <li>序号</li>
            <li>项目名称</li>
            <li>建设单位名称</li>
            <li>负责人</li>
            <li>电话</li>
            <li>项目状态</li>
            <li>上访人数</li>
            <li id="fxzs" style="visibility: hidden">风险指数</li>
        </ul>
        <!-- 内容 -->
        <div class="divContentUl" id="projectBuilder">
            <ul class="ulContent">
                <li>001</li>
                <li>苏荷·海棠湾</li>
                <li>漯河星汇置业有限公司</li>
                <li>齐瑞锋</li>
                <li>18503956567</li>
                <li>正常施工</li>
                <li>9</li>
                <li>
				<span class="zcsg">
								90
				</span>
                </li>
            </ul>
            <ul class="ulContent">
                <li>002</li>
                <li>建业云熙府三期</li>
                <li>漯河建业住宅建设有限公司</li>
                <li>李宙鹏</li>
                <li>15393787321</li>
                <li>长期停工</li>
                <li>50</li>
                <li>
							<span class="cqtg">
								80
							</span>
                </li>
            </ul>
            <ul class="ulContent">
                <li>003</li>
                <li>苏荷·海棠湾</li>
                <li>漯河星汇置业有限公司</li>
                <li>齐瑞锋</li>
                <li>18503956567</li>
                <li>暂时停工</li>
                <li>9</li>
                <li>
							<span class="zstg">
								60
							</span>
                </li>
            </ul>
            <ul class="ulContent">
                <li>004</li>
                <li>建业云熙府三期</li>
                <li>漯河建业住宅建设有限公司</li>
                <li>李宙鹏</li>
                <li>15393787321</li>
                <li>正常施工</li>
                <li>50</li>
                <li>
							<span class="zcsg">
								20
							</span>
                </li>
            </ul>
            <ul class="ulContent">
                <li>005</li>
                <li>苏荷·海棠湾</li>
                <li>漯河星汇置业有限公司</li>
                <li>齐瑞锋</li>
                <li>18503956567</li>
                <li>正常施工</li>
                <li>9</li>
                <li>
							<span class="zcsg">
								90
							</span>
                </li>
            </ul>
            <ul class="ulContent">
                <li>006</li>
                <li>建业云熙府三期</li>
                <li>漯河建业住宅建设有限公司</li>
                <li>李宙鹏</li>
                <li>15393787321</li>
                <li>正常施工</li>
                <li>50</li>
                <li>
							<span class="zcsg">
								80
							</span>
                </li>
            </ul>
            <ul class="ulContent">
                <li>007</li>
                <li>苏荷·海棠湾</li>
                <li>漯河星汇置业有限公司</li>
                <li>齐瑞锋</li>
                <li>18503956567</li>
                <li>暂时停工</li>
                <li>9</li>
                <li>
							<span class="zstg">
								90
							</span>
                </li>
            </ul>
            <ul class="ulContent">
                <li>008</li>
                <li>建业云熙府三期</li>
                <li>漯河建业住宅建设有限公司</li>
                <li>李宙鹏</li>
                <li>15393787321</li>
                <li>正常施工</li>
                <li>50</li>
                <li>
							<span class="zcsg">
								80
							</span>
                </li>
            </ul>
            <ul class="ulContent">
                <li>009</li>
                <li>苏荷·海棠湾</li>
                <li>漯河星汇置业有限公司</li>
                <li>齐瑞锋</li>
                <li>18503956567</li>
                <li>正常施工</li>
                <li>9</li>
                <li>
							<span class="zcsg">
								90
							</span>
                </li>
            </ul>
            <ul class="ulContent">
                <li>010</li>
                <li>建业云熙府三期</li>
                <li>漯河建业住宅建设有限公司</li>
                <li>李宙鹏</li>
                <li>15393787321</li>
                <li>正常施工</li>
                <li>50</li>
                <li>
							<span class="zcsg">
								80
							</span>
                </li>
            </ul>
            <ul class="ulContent">
                <li>011</li>
                <li>建业云熙府三期</li>
                <li>漯河建业住宅建设有限公司</li>
                <li>李宙鹏</li>
                <li>15393787321</li>
                <li>正常施工</li>
                <li>50</li>
                <li>
							<span class="zcsg">
								80
							</span>
                </li>
            </ul>
            <ul class="ulContent">
                <li>012</li>
                <li>建业云熙府三期</li>
                <li>漯河建业住宅建设有限公司</li>
                <li>李宙鹏</li>
                <li>15393787321</li>
                <li>正常施工</li>
                <li>50</li>
                <li>
							<span class="zcsg">
								80
							</span>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var hasRoles = [[${@permission.hasAnyRoles('admin,riskIndex')}]];

    /** 消息状态码 */
    web_status = {
        SUCCESS: 0,
        FAIL: 500,
        WARNING: 301
    };
    $(function () {
        if ($(".divContentUl ul").length > 10) {
            $(".ulTitle").css("margin-right", "17px");
        }
        $("#btnSearch").click(function () {
            var queryName = $("#projectName").val();
            loadProjectInfos(queryName);
        });
        loadProjectCount();
        loadProjectInfos("");
    })


    function loadProjectCount() {
        $.ajax({
            url: "/architecture/home/queryProjectCount",
            data: null,
            cache: false,
            contentType: false,
            processData: false,
            type: 'GET',
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    $('#projectCount').html(result.data);
                } else {
                    alert(result.msg);
                }
            }
        });
    }

    function loadProjectInfos(queryName) {
        if (hasRoles == "") {
            $("#fxzs").css("visibility","visible");
        }
        $.ajax({
            url: "/architecture/home/queryProjectBuilderInfo?queryName=" + queryName,
            data: null,
            cache: false,
            contentType: false,
            processData: false,
            type: 'GET',
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    $("#projectBuilder").html("");
                    var ulHtml = '';
                    for (let i = 0; i < result.data.length; i++) {
                        let item = result.data[i];
                        let ahref = '<a class="myHref" href="javascript:void(0);" onclick="opentt(\'' + item.builderCompanyName + '\',' + item.projectId + ',' + item.builderId + ')">' + item.builderCompanyName + '</a>';
                        let bhref = '<a class="myHref" href="javascript:void(0);" onclick="openrs(\'' + item.projectName + '\',' + item.projectId + ',' + item.builderId + ')">' + item.total + '</a>';

                        let liItem = "";
                        if (hasRoles == "") {
                            liItem = '<li> <span class="zcsg">' + item.scores + '</span></li>'
                        }
                        var ul = ' <ul class="ulContent">' +
                            '                <li>' + item.projectNo + '</li>' +
                            '                <li>' + item.projectName + '</li>' +
                            '                <li>' + ahref + '</li>' +
                            '                <li>' + item.builderManagerName + '</li>' +
                            '                <li>' + item.builderManagerPhone + '</li>' +
                            '                <li>' + item.projectStatus + '</li>' +
                            '                <li>' + bhref + '</li>' +
                            liItem +
                            ' </ul>'
                        ulHtml = ulHtml + ul;
                    }
                    $("#projectBuilder").html(ulHtml);
                } else {
                    alert(result.msg);
                }
            }
        });
    }

    //打开详情
    function opentt(name, pid, bid) {
        var url = '/architecture/home/detail?projectId=' + pid + '&builderId=' + bid;
        $.modal.openTab(name, url, true);
    }

    //打开投诉人数详情
    function openrs(name, pid, bid) {
        let options = {
            title: name+" 投诉详细",
            width: 950,
            height: 500,
            url: '/architecture/home/complain?projectId='+pid+"&builderId="+bid,
            skin: 'layui-layer-gray',
            btn: ['关闭'],
            yes: function (index, layero) {
                layer.close(index);
            }
        };
        $.modal.openOptions(options);
    }

</script>
</html>
